<!DOCTYPE html>
<!-- 声明文档使用简体中文 -->
<html lang="zh-CN">

<!-- 文档头部，包含元数据和页面标题等信息 -->

<head>
    <!-- 设置文档字符编码为 UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置页面在移动设备上的视口，确保页面在不同设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置页面标题 -->
    <title>Lunar Astral Agents - 控制面板</title>
    <!-- 定义页面的样式信息 -->
    <style>
        /**
         * 引入 Font Awesome 6.4.0 图标库样式文件
         */
        @import url('./import/fontAwesome/css/all.min.css');
        /**
         * 引入自定义的页面样式文件
         */
        @import url('./css/controlPageStyle.css');
    </style>
</head>

<!-- 文档主体，包含页面的实际内容 -->

<body>
    <!-- 页面容器，包裹所有主要内容 -->
    <div class="container">
        <!-- 页面头部，包含标题和副标题 -->
        <div class="header">
            <h1><i class="fas fa-moon"></i> Lunar Astral Agents</h1>
            <div class="subtitle">智能代理控制面板 - 高级配置与监控系统</div>
        </div>

        <!-- 服务状态区域，显示服务当前状态和操作按钮 -->
        <div class="service-status" id="serviceStatus">
            <!-- 服务信息，显示状态指示器和状态文本 -->
            <div class="service-info">
                <span class="status-indicator status-offline" id="statusIndicator"></span>
                <div>
                    <h3>服务状态: <span id="statusText">离线</span></h3>
                    <p id="statusDetails">服务当前未运行，请启动服务以开始使用</p>
                </div>
            </div>
            <!-- 服务操作按钮区域，包含启动、停止和保存按钮 -->
            <div class="service-actions">
                <button class="btn btn-primary btn-small" onclick="startService()">
                    <i class="fas fa-play"></i> 启动
                </button>
                <button class="btn btn-secondary btn-small" onclick="stopService()">
                    <i class="fas fa-stop"></i> 停止
                </button>
                <button class="btn btn-warning btn-small" onclick="compileAndStart()">
                    <i class="fas fa-hammer"></i> 编译
                </button>
                <button class="btn btn-secondary btn-small" onclick="saveConfig()">
                    <i class="fas fa-save"></i> 保存
                </button>
            </div>
        </div>

        <!-- 标签页容器，包含不同配置项的标签 -->
        <div class="tab-container">
            <div class="tab active" onclick="switchTab('system')">系统配置</div>
            <div class="tab" onclick="switchTab('model')">模型配置</div>
            <div class="tab" onclick="switchTab('packaging')">打包配置</div>
        </div>

        <!-- 系统配置标签页内容，默认激活 -->
        <div class="tab-content active" id="systemTab">
            <!-- 仪表盘布局 -->
            <div class="dashboard" style="grid-template-columns: 1fr;">
                <!-- 卡片组件，包含核心系统设置 -->
                <div class="card">
                    <!-- 卡片头部，包含图标和标题 -->
                    <div class="card-header">
                        <i class="fas fa-server"></i>
                        <h3>核心系统设置</h3>
                    </div>
                    <!-- 表单组，包含系统服务端口输入框 -->
                    <div class="form-group">
                        <label for="system_url_port">系统服务端口</label>
                        <input type="number" id="system_url_port" value="36789" min="1000" max="65535">
                    </div>
                    <!-- 复选框表单组，包含开发者模式复选框 -->
                    <div class="form-group checkbox-group">
                        <input type="checkbox" id="system_dev_mode">
                        <label for="system_dev_mode">开发者模式</label>
                    </div>
                    <!-- 复选框表单组，包含使用局域网IP复选框 -->
                    <div class="form-group checkbox-group">
                        <input type="checkbox" id="use_local_network">
                        <label for="use_local_network">使用局域网IP</label>
                    </div>
                    <!-- 复选框表单组，包含启动时释放占用端口复选框 -->
                    <div class="form-group checkbox-group">
                        <input type="checkbox" id="port_release">
                        <label for="port_release">启动时释放占用端口</label>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模型配置标签页内容 -->
        <div class="tab-content" id="modelTab">
            <!-- 仪表盘布局 -->
            <div class="dashboard">
                <!-- 卡片组件，包含基础模型配置 -->
                <div class="card">
                    <!-- 卡片头部，包含图标和标题 -->
                    <div class="card-header">
                        <i class="fas fa-robot"></i>
                        <h3>基础模型配置</h3>
                    </div>
                    <!-- 表单组，包含模型服务端口输入框 -->
                    <div class="form-group">
                        <label for="model_system_port">模型服务端口 (0=使用内置)</label>
                        <input type="number" id="model_system_port" value="0" min="0" max="65535">
                    </div>
                    <!-- 表单组，包含模型监听端口输入框 -->
                    <div class="form-group">
                        <label for="model_url_port">模型监听端口</label>
                        <input type="number" id="model_url_port" value="40318" min="1000" max="65535">
                    </div>
                    <!-- 表单组，包含模型文件路径输入框 -->
                    <div class="form-group">
                        <label for="model_file_path">模型文件路径</label>
                        <input type="text" id="model_file_path" value="./local_data/models">
                    </div>
                </div>

                <!-- 卡片组件，包含高级模型配置 -->
                <div class="card">
                    <!-- 卡片头部，包含图标和标题 -->
                    <div class="card-header">
                        <i class="fas fa-microchip"></i>
                        <h3>高级模型配置</h3>
                    </div>
                    <!-- 表单组，包含嵌入模型路径输入框 -->
                    <div class="form-group">
                        <label for="model_embedding_index">嵌入模型路径</label>
                        <input type="text" id="model_embedding_index" value="void" placeholder="留空或填'void'使用默认">
                    </div>
                    <!-- 表单组，包含推理模型路径输入框 -->
                    <div class="form-group">
                        <label for="model_reasoning_index">推理模型路径</label>
                        <input type="text" id="model_reasoning_index" value="void" placeholder="留空或填'void'使用默认">
                    </div>
                    <!-- 表单组，包含视觉模型路径输入框 -->
                    <div class="form-group">
                        <label for="model_visualing_index">视觉模型路径</label>
                        <input type="text" id="model_visualing_index" value="void" placeholder="留空或填'void'使用默认">
                    </div>
                </div>
            </div>
        </div>

        <!-- 打包配置标签页内容 -->
        <div class="tab-content" id="packagingTab">
            <!-- 仪表盘布局 -->
            <div class="dashboard" style="grid-template-columns: 1fr;">
                <!-- 卡片组件，包含打包设置 -->
                <div class="card">
                    <!-- 卡片头部，包含图标和标题 -->
                    <div class="card-header">
                        <i class="fas fa-box"></i>
                        <h3>打包设置</h3>
                    </div>
                    <!-- 表单组，包含输出文件名称输入框 -->
                    <div class="form-group">
                        <label for="out_base">输出文件名称</label>
                        <input type="text" id="out_base" placeholder="留空则不打包">
                    </div>
                    <!-- 表单组，包含分卷大小输入框 -->
                    <div class="form-group">
                        <label for="part_size_mb">分卷大小 (MB)</label>
                        <input type="number" id="part_size_mb" value="2048" min="1">
                    </div>
                    <!-- 表单组，包含压缩级别输入框 -->
                    <div class="form-group">
                        <label for="compression_level">压缩级别 (0-9)</label>
                        <input type="number" id="compression_level" value="5" min="0" max="9">
                    </div>
                    <!-- 表单组，包含打包级别选择框 -->
                    <div class="form-group">
                        <label for="package_level">打包级别</label>
                        <select id="package_level">
                            <option value="1">1 - 核心文件</option>
                            <option value="2">2 - 核心+扩展</option>
                            <option value="3" selected>3 - 完整打包</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- 状态面板卡片，用于显示实时状态监控信息 -->
        <div class="card status-panel">
            <!-- 卡片头部，包含图标和标题 -->
            <div class="card-header">
                <i class="fas fa-chart-bar"></i>
                <h3>实时状态监控</h3>
            </div>
            <!-- 输出区域，显示状态信息 -->
            <div id="output">
                <div class="output-line output-info">控制面板已就绪，请配置参数后启动服务...</div>
            </div>
            <!-- 操作按钮区域，包含清空输出和导出日志按钮 -->
            <div class="actions" style="margin-top: 20px;">
                <button class="btn btn-secondary" onclick="clearOutput()">
                    <i class="fas fa-trash"></i> 清空输出
                </button>
                <button class="btn btn-secondary" onclick="exportLogs()">
                    <i class="fas fa-download"></i> 导出日志
                </button>
            </div>
        </div>
    </div>

    <!-- 引入自定义的页面脚本文件 -->
    <script src="./js/controlPageScript.js"></script>
</body>

</html>